<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:ctg="http://www.crotouristguide.com/taglib"
	xmlns:c="http://java.sun.com/jstl/core">
<body>
<ui:component>

	<script type="text/javascript">
		jQuery(document).ready(function($) {
		 	 jQuery('#gallery a').lightBox({
				imageLoading: '#{application.contextPath}/resources/plugins/lightbox/images/lightbox-ico-loading.gif',
				imageBtnClose: '#{application.contextPath}/resources/plugins/lightbox/images/lightbox-btn-close.gif',
				imageBtnPrev: '#{application.contextPath}/resources/plugins/lightbox/images/lightbox-btn-prev.gif',
				imageBtnNext: '#{application.contextPath}/resources/plugins/lightbox/images/lightbox-btn-next.gif',
				imageBlank: '#{application.contextPath}/resources/plugins/lightbox/images/lightbox-blank.gif'
		 	 });
		});
	</script>

	<ul id="gallery">
		<c:forEach items="#{slike}" var="slika" varStatus="status">
			<li><h:outputLink
				value="/static/images/#{slika.getImeSlike('')}" title="#{slika.opis}">
				<f:subview rendered="#{status.index == 0}">
					<img src="/static/images/#{slika.getImeSlike('m')}" alt="#{messages['label.image.alt']} #{alt}" width="240" height="180"/>
				</f:subview>
			</h:outputLink></li>
		</c:forEach>
		<c:forEach items="#{panoramio}" var="p" varStatus="status">
			<li><h:outputLink 
				value="#{p.url}" title="Panoramio: #{p.title}">
				<h:graphicImage value="#{p.url}" alt="#{messages['label.image.alt']} #{alt}" rendered="#{status.index == 0 and (slike == null or slike.size() == 0)}" width="#{width == null ? '240' : width}" height="#{height == null ? '180' : height}" title="#{p.title}"/>
			</h:outputLink></li>
		</c:forEach>	
	</ul>
	<c:if test="#{slike.size() == 0 and (panoramio == null || panoramio.size() == 0)}">
		<c:set value="true" var="ren"></c:set>
	</c:if>	
	<h:graphicImage value="/resources/images/no_image.png" rendered="#{ren == true}" alt="#{messages['label.image.alt']}"></h:graphicImage>
</ui:component>
</body>
</html>
